<!--

  左右布局的列表

  // 带*号表示必填属性
  props: 
    reverse:(Boolean)     是否开启反转模式      默认图片居右显示，如果该属性为true，则图片在左侧展示
    line:(Boolean)        列表下边框            一般最后一个列表设置为false不显示下边框
    *data:(Object)        定义列表展示的数据
        {
          *title:(String)      列表的标题
          *time:(String)       列表底部时间
          image:(String)       列表侧边展示的图片
        }
    
  slot: 
    

-->



<template>
  <f7-row class="qm-consult-list">
    <f7-col width="100">
      <div class="consult-box" :class="{reverse : reverse, line : line}">
        <div class="left">
          <div class="title">{{data.title}}</div>
          <div class="time">{{data.time}}</div>
        </div>
        <div class="right" v-if="data.image">
          <img :src="data.image" alt="" />
        </div>
      </div>
    </f7-col>
  </f7-row>
</template>

<script>
export default {
  props: {
    reverse: {
      type: Boolean,
      default: false,
    },
    line: {
      type: Boolean,
      default: true
    },
    data: {
      type: Object
    }
  },
};
</script>

<style lang="less" scoped>
.qm-consult-list {
  .consult-box {
    width: 100%;
    padding-top: calc(40px * var(--ratio));
    padding-bottom: calc(40px * var(--ratio));
    display: flex;
    position: relative;

    .left {
      flex: 1;
      .title {
        font-size: var(--font-size-maincontent);
        min-height: calc(2 * var(--font-size-maincontent) * 1.5);
        color: var(--color-text-title);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      .time {
        margin-top: calc(16px * var(--ratio));
        font-size: var(--font-size-subcontent-2);
        color: var(--color-text-subtext);
      }
    }
    .right {
      width: calc(206px * var(--ratio));
      height: calc(160px * var(--ratio));
      margin-left: calc(30px * var(--ratio));
      border-radius: 6px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .line{
    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 1px;
      bottom: 0;
      background: var(--color-divider-background);
    }
  }

  .reverse {
    flex-direction: row-reverse;
    .left {
      .time {
        text-align: right;
      }
    }
    .right {
      margin-left: 0;
      margin-right: calc(30px * var(--ratio));
    }
  }

  &:last-child {
    .line {
      &::after {
        display: none;
      }
    }
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
  .line::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
  .line::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}
</style>
